<template>
  <div>
    <el-drawer
      :visible.sync="drawer"
      direction="rtl"
      size="50%"
      :with-header="false"
      :width="700"
      @close="close"
    >
      <div class="drawer_box">
        <div class="drawer_title">
          <div class="drawer_t">
            <div class="drawer_t_l">
              <img
                class="drawer_t_l_img"
                src="../../../../../static/skin/herodoo/main/platform/home/img/piliangoumai.png"
                alt=""
              />
              编辑合同权益
            </div>
            <img
              class="drawer_t_r"
              src="../../../../../static/skin/herodoo/main/platform/home/img/guanbi.png"
              alt=""
              @click="drawer = false"
            />
          </div>
        </div>
        <div class="drawer_content">
          <div class="button_box">
            <img
              src="../../../../../static/skin/herodoo/main/platform/home/img/piliangoumai.png"
              alt=""
            />
            <div class="button">合同文件</div>
          </div>
          <div class="block">
            <div class="table-tr">
              <div class="imgs">操作</div>
              <div class="xh"></div>
              <div class="name">
                <img
                  src="../../../../../static/skin/default/MCS/AIGC/Inventory/images/hxz.svg"
                  alt=""
                />
                <span v-if="handleData"
                  >({{ messageList.pdfUrl.length }}个)</span
                >
              </div>
              <div class="progess"></div>
              <div class="upload">
                <el-upload
                  ref="upload"
                  class="upload-demo"
                  action="#"
                  :multiple="false"
                  :limit="3"
                  accept=".pdf"
                  :http-request="httpRequest"
                  :show-file-list="false"
                  :before-upload="beforeUpload"
                >
                  <el-button size="small" type="primary"
                    ><i class="el-icon-plus"></i>点击添加附件</el-button
                  >
                </el-upload>
              </div>
            </div>
            <block v-show="isShow">
              <div class="table-tr" v-for="(item, i) in messageList.pdfUrl">
                <div class="imgs">
                  <img
                    @click="openPdfView(item, i)"
                    src="../../../../../static/skin/default/MCS/AIGC/Inventory/images/chakan.png"
                    alt=""
                  />

                  <img
                    @click="delPDF(i)"
                    src="../../../../../static/skin/default/MCS/AIGC/Inventory/images/shanchu.png"
                    alt=""
                  />
                </div>
                <div class="xh">{{ i + 1 }}</div>
                <div
                  class="name name-blue"
                  @click="openPdfView(item, i)"
                  :style="{ width: item.percentage < 100 ? '25%' : '50%' }"
                >
                  <img
                    src="../../../../../static/skin/default/MCS/AIGC/Inventory/images/hxz.svg"
                    alt=""
                  />
                  {{ item.name }}
                </div>
                <div class="progess" v-if="item.percentage < 100">
                  <el-progress
                    :percentage="item.percentage"
                    color="#fba123"
                    :show-text="false"
                  ></el-progress>
                </div>
                <div class="upload">
                  {{ (item.size / 1024 / 1024).toFixed(2) }}MB
                </div>
              </div>
            </block>
          </div>
          <div class="button_box">
            <img
              src="../../../../../static/skin/herodoo/main/platform/home/img/piliangoumai.png"
              alt=""
            />
            <div class="button">基本信息</div>
          </div>
          <div class="block">
            <div
              style="position: absolute;height: 100%;display: flex;justify-content: space-between;width: 100%;overflow: hidden;"
            >
              <div class="drawer_content_left drawer_content_list">
                <div
                  class="line"
                  v-for="item in 50"
                  :style="{ top: item * 4.8 + 'rem' }"
                >
                  <div class="yuan"></div>
                  <div class="xian"></div>
                  <div class="yuan"></div>
                </div>
              </div>
              <div class="drawer_content_right drawer_content_list"></div>
            </div>
            <div class="text_content">
              <template>
                <div class="list_text">
                  <div class="list_text_left">合同编号:</div>
                  <div class="list_text_right">{{ messageList.Code }}</div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">合作模式:</div>
                  <div class="list_text_right">{{ messageList.TypeID }}</div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">权益数量:</div>
                  <div class="list_text_right">
                    {{ messageList.ContractEquityCount }}
                  </div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">合作企业:</div>
                  <div class="list_text_right">{{ messageList.CompanyID }}</div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">上架平台:</div>
                  <div class="list_text_right">{{ messageList.Platform }}</div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">合同签署时长(年):</div>
                  <div class="list_text_right">
                    {{ messageList.ServiceYears }}
                  </div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">合同开始日期:</div>
                  <div class="list_text_right">{{ messageList.StartTime }}</div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">合同截止日期:</div>
                  <div class="list_text_right">{{ messageList.EndTime }}</div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">合同附件:</div>
                  <div class="list_text_right" v-if="handleData">
                    <div v-for="item in messageList.pdfUrl">
                      <div class="text-hetong" @click="openPdfView(item)">
                        {{ item.name }}
                      </div>
                    </div>
                  </div>
                </div>

                <div class="list_text">
                  <div class="list_text_left">产品类型:</div>
                  <div class="list_text_right" v-if="tableData[0]">
                    {{ tableData[0].ProductType }}
                  </div>
                </div>

                <!-- <div class="list_text">
                                    <div class="list_text_left">产品名称:</div>
                                    <div class="list_text_right">{{ }}</div>
                                </div> -->
              </template>
            </div>
          </div>

          <div class="block_title">关联权益</div>

          <div class="block">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column
                prop=""
                label="序号"
                width="60"
                type="index"
                :index="getIndex"
              >
              </el-table-column>
              <el-table-column prop="ProductType" label="产品类型" width="180">
              </el-table-column>
              <el-table-column prop="ProductName" label="产品名称" width="200">
              </el-table-column>
              <el-table-column
                prop="Name"
                label="权益名称"
                width="200"
                color="red"
              >
                <template slot-scope="scope">
                  <div @click="open(scope.row)" class="table-name">
                    {{ scope.row.Name }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="SalePrice"
                label="平台价格(元)"
                width="160"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="PlatformServiceRate"
                label="权益平台服务费"
                width="160"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.PlatformServiceRate * 100 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="EquityServiceRate"
                label="小程序服务费"
                width="160"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.EquityServiceRate * 100 }}</span>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              v-if="total > 0"
              background
              layout="prev, pager, next"
              :total="total"
              :current-page="currentPage"
              :page-size="pageSize"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>

          <div class="drawer_footer">
            <div class="footer-btn" @click="save">保存</div>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      :visible.sync="pdfView"
      direction="rtl"
      size="50%"
      :with-header="false"
      :width="700"
    >
      <div class="drawer_box2">
        <div class="drawer_t">
          <div class="drawer_t_l">
            文件预览
          </div>
          <img
            class="drawer_t_r"
            src="../../../../../static/skin/herodoo/main/platform/home/img/guanbi.png"
            alt=""
            @click="pdfView = false"
          />
        </div>
        <iframe class="iframe" :src="docxUrl" frameborder="0"></iframe>
      </div>
    </el-drawer>

    <rights-detail
      :rightId="messageList.EquityID"
      :octopus="octopus"
      ref="rightsDetail"
    ></rights-detail>
  </div>
</template>

<script>
import rightsDetail from "./rightsDetail.vue";
export default {
  name: "look_dialog",
  components: {
    rightsDetail
  },
  props: {
    messageList: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      octopus: this.$parent.octopus,
      drawer: false,
      rightList: [],
      docxUrl: "",
      pdfView: false,
      fileList: [],
      isShow: true,
      percentage: 50,

      tableData: [],
      total: 0,
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      handleData: false,
      equityType: "" //产品类型
    };
  },
  mounted() {},
  created() {},
  computed: {},
  watch: {
    drawer(newMessage, oldMessage) {
      if (newMessage) {
        // this.getEquity(this.messageList.ID)
      }
      // 在这里可以执行其他操作
    },
    messageList(e) {
      this.messageList.pdfUrl = e.FilePath ? JSON.parse(e.FilePath) : [];
    }
  },
  methods: {
    open(row) {
      // 展示权益详情
      this.$refs.rightsDetail.init(row.ID);
      this.$nextTick(() => {
        this.$refs.rightsDetail.drawerOp();
      });
    },
    close() {
      this.$emit("reload");
    },
    drawerOp() {
      this.drawer = true;
      this.handleData = true;
      this.getProduct(this.messageList.ID);
    },
    handleExceed() {
      this.octopus.error("最多上传1个。");
    },
    //报告预览
    openPdfView(item) {
      let _this = this;
      let file_path = item.path.substring(item.path.indexOf("upload") + 6);
      let view_path =
        _this.octopus.config.url +
        "/Octopus/Engine/Viewer/" +
        item.name +
        "?" +
        "path=" +
        file_path +
        "&access_token=" +
        _this.octopus.passport.token;
      _this.pdfView = true;
      _this.docxUrl = view_path;
    },
    httpRequest({ file }) {
      // console.log(this.messageList.pdfUrl);

      this.octopus.request.api.upload(
        file,
        data => {
          // this.messageList.pdfUrl.at(-1).percentage = data.percentage
        },
        res => {
          if (res.status.code == 200) {
            let obj = {
              name: res.content.name,
              size: res.content.size,
              path: `${this.octopus.config.url}${res.content.url}`,
              percentage: 0
            };
            this.messageList.pdfUrl.at(-1).path = `${this.octopus.config.url}${
              res.content.url
            }`;
            this.isShow = false;
            setTimeout(() => {
              this.isShow = true;
            }, 1);
          } else {
            this.$message.error("上传失败,请重新上传！");
          }
        }
      );
    },
    save() {
      this.$confirm(`确定保存合同文件吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // type: 'warning'
        center: true
      })
        .then(res => {
          this.updata();
        })
        .catch(() => {
          console.log("取消了");
        });
    },
    updata() {
      let str = JSON.stringify(this.messageList.pdfUrl);
      this.octopus.request.api.post(
        "/Octopus/Engine/Item",
        {
          id: 1188,
          type: "UPDATE",
          value: this.messageList.ID,
          cellData: [
            { name: "FilePath", defaultValue: str } // 合同附件
          ]
        },
        datas => {
          if (datas.status.code == 200) {
            this.$message.success("保存成功！");
          } else {
            this.octopus.tips.error(datas);
            this.messageList.pdfUrl.slice(0, -1);
          }
        }
      );
    },
    delPDF(i) {
      this.$confirm(`是否删除这个合同文件?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        // type: 'warning'
        center: true
      })
        .then(res => {
          this.messageList.pdfUrl.splice(i, 1);
          this.isShow = false;
          setTimeout(() => {
            this.isShow = true;
          }, 1);
          // this.updata();
        })
        .catch(() => {
          console.log("取消了");
        });
    },
    beforeUpload(file) {
      const isExcel = /\.(pdf)$/.test(file.name);
      if (!isExcel) {
        this.$message.error("只能上传PDF文件！");
        return false;
      }
      let o = this;
      let view = { name: file.name, path: ``, size: `${file.size}` };
      if (!o.messageList.pdfUrl) {
        o.messageList.pdfUrl = [];
      }
      o.messageList.pdfUrl.push(view);
      o.isShow = false;
      setTimeout(() => {
        o.isShow = true;
      }, 100);
    },
    getEquity(id) {
      let _that = this;
      _that.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 602,
          cellData: [
            { name: "CompanyID" }, // 公司ID
            { name: "ContractID" }, // 合同ID
            { name: "CostPrice" }, // CostPrice
            { name: "CreateTime" }, // CreateTime
            { name: "CreateUserID" }, // 创建人
            { name: "Description" }, // Description
            { name: "Description_EN" }, // Description_EN
            { name: "EquityServiceRate" }, // EquityServiceRate
            { name: "FlagList" }, // FlagList
            { name: "ID" }, // ID
            { name: "Name" }, // Name
            { name: "Name_EN" }, // Name_EN
            { name: "PlatformServiceRate" }, // PlatformServiceRate
            { name: "SalePrice" }, // SalePrice
            { name: "ThumbnailPath" }, // ThumbnailPath
            { name: "UpdateTime" } // UpdateTime
          ],
          paramData: {
            ID: id
          },
          pageData: {
            index: _that.currentPage,
            rowSize: _that.pageSize
          }
        },
        function(data) {
          if (data.status.code == 200) {
            _that.tableData = data.content.queryData;
            _that.total = data.content.pageData.totalRows;
          } else {
            _that.octopus.tips.error(data);
          }
        }
      );
    },
    getIndex(index) {
      return index + 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getProduct(this.messageList.ID);
      // this.getEquity(this.messageList.ID);
    },
    getProduct(id) {
      this.octopus.request.api.post(
        "/Octopus/Engine/List",
        {
          id: 604,
          cellData: [
            { name: "ProductID" }, // 产品ID
            { name: "ProductName" }, // 产品名称
            { name: "ProductType" }, // 产品类型
            { name: "ID" }, // ID
            { name: "Name" }, // 报警区域
            { name: "SalePrice" }, // 市场价格
            { name: "PlatformServiceRate" }, // EquityServiceRate
            { name: "EquityServiceRate" } // EquityServiceRate
          ],
          paramData: {
            ContractID: id
          },
          pageData: {
            index: this.currentPage,
            rowSize: this.pageSize
          }
        },
        data => {
          if (data.status.code == 200) {
            this.tableData = data.content.queryData;
            this.total = data.content.pageData.totalRows;
          } else {
            this.octopus.tips.error(data);
          }
        }
      );
    }
  }
};
</script>
<style scoped>
.drawer_box {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_title {
  box-shadow: 0px 5px 5px rgb(230 228 228 / 30%);
  padding-bottom: 1rem;
}

.drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
}

.drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.button_box {
  margin: 1rem 0;
  display: flex;
  font-size: 2rem;
  font-weight: 700;
}

.button_box img {
  width: 24px;
  height: 24px;
}

.button_box .button {
  /* margin-right: .8rem;
    padding: 1rem 2rem;
    font-size: 1.6rem;
    background-color: #fff;
    color: #F78C55;
    box-shadow: 0px 0px 7px 0px rgb(180 171 206 / 53%);
    border-radius: .8rem;
    cursor: pointer; */
}

.drawer_content {
  overflow-y: auto;
  margin-top: 1.5rem;
  height: calc(100vh - 5rem);
  padding: 0 3rem;
  /* display: flex; */
  width: 100%;
  /* justify-content: space-between; */
  padding-bottom: 1rem;
}

.drawer_content .block {
  position: relative;
  width: 100%;
  height: fit-content;
}

.drawer_content .block_title {
  margin: 2rem 0;
  font-size: 2rem;
  font-weight: 700;
}

.drawer_content_list {
  height: 100%;
  padding: 3rem;
  box-sizing: border-box;
  box-shadow: 0px 2px 6px 0px rgba(180, 171, 206, 0.4),
    inset 0px 0px 8px 0px rgba(247, 246, 250, 0.5),
    inset 0px 0px 4px 0px #eeecf4;
  width: 25.5%;
  top: 0;
}

.drawer_content_right {
  width: 73%;
  right: 0;
}

.drawer_content_list .name {
  line-height: 3rem;
}

.drawer_content_left {
  position: relative;
  background-color: #fdfdfd;
}

.drawer_content .line {
  position: absolute;
  display: flex;
  width: 5rem;
  justify-content: space-between;
  right: -3rem;
  border: none;
  z-index: 100;
}

.drawer_content .line .yuan {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid #c6c6c9;
}

.drawer_content .line .xian {
  position: absolute;
  width: 4rem;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  margin: auto;
  height: 0.5rem;
  background-color: #c6c6c9;
  box-shadow: 0px 2px 6px 0px rgba(180, 171, 206, 0.4);
}

.text_content {
  position: relative;
  z-index: 1000;
}

.text_content .list_text {
  display: flex;
  padding: 0 3rem;
  box-sizing: border-box;
  justify-content: space-between;
}

.text_content .list_text > div {
  font-size: 1.6rem;
  line-height: 6rem;
  border-bottom: 1px solid #e6e6e6;
}

.text_content .list_text .list_text_left {
  width: 19.5%;
}

.text_content .list_text .list_text_right {
  width: 71%;
}

.text_content .list_text .list_text_right img {
  width: 12rem;
  height: 12rem;
  margin-top: 1rem;
  margin-right: 0.6rem;
  margin-bottom: 1rem;
}

.list_text_right_table {
  margin-top: 1rem;
}

.list_text_right_table > div {
  display: flex;
  text-align: center;
  justify-content: space-between;
  box-sizing: border-box;
  line-height: 3rem;
  padding: 1rem 1.5rem;
}

.list_text_right_table .tr {
  color: #827070;
}

.list_text_right_table .tr:nth-of-type(odd) {
  background-color: #fdfbfa;
}

.drawer_content .list_title {
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 0.6rem;
}

.text-hetong {
  color: #4791ff;
  cursor: pointer;
}

.popup {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.106);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;

  .box {
    width: 70vw;
    height: 90vh;
    background-color: #ffff;
    border-radius: 2rem;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 5%;
    overflow: hidden;

    .title {
      width: 100%;
      height: 6rem;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 2rem;
      border-bottom: 1px solid #dfdfdf;

      div {
        font-size: 2rem !important;
        line-height: 6rem;

        i {
          font-size: 3rem !important;
          line-height: 6rem;
          cursor: pointer;
        }
      }
    }

    iframe {
      width: 100%;
      height: calc(100% - 6rem);
    }

    embed {
      width: 100%;
      height: calc(100% - 6rem);
    }
  }
}

.table-tr {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #f5f5f5;
}

.table-tr .imgs,
.table-tr .xh,
.table-tr .name,
.table-tr .progess,
.table-tr .upload {
  font-size: 1.7rem;
  font-weight: 700;
  box-shadow: 1px 1px #e6e6e6;
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
}

.table-tr .imgs {
  width: 12%;
}

.table-tr .xh {
  width: 8%;
  box-shadow: 0px 1px #e6e6e6;
}

.table-tr .name {
  width: 25%;
  box-shadow: 0px 1px #e6e6e6;
  text-decoration: underline;
  justify-content: start;
}

.table-tr .name-blue,
.table-name {
  color: #4791ff;
  cursor: pointer;
}

.table-tr .imgs img {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.table-tr .name img {
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin-right: 10px;
}

.table-tr .progess {
  width: 28%;
  box-shadow: 0px 1px #e6e6e6;
}

.table-tr .progess >>> .el-progress {
  width: 90%;
}

.table-tr .upload {
  width: 27%;
  box-shadow: 0px 1px #e6e6e6;

  justify-content: start;
}

>>> .el-button--primary {
  background: #fff;
  color: #fba123;
  border: 0;
  box-shadow: 2px 2px #d7d7d7;
}

.drawer_box2 {
  padding: 3rem 0.8rem 3rem 0;
  height: calc(100% - 5rem);
  display: flex;
  flex-direction: column;
}

.drawer_box2 .drawer_t {
  padding: 0 2.8rem;
  display: flex;
  justify-content: space-between;
}

.drawer_box2 .drawer_t_l {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: bold;
}

.drawer_box2 .drawer_t_l_img {
  width: 2.8rem;
  margin-right: 1rem;
}

.drawer_box2 .drawer_t_r {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}

.drawer_box2 .drawer_c {
  font-size: 1.6rem;
  height: 85vh;
  overflow: auto;
  margin-top: 3rem;
  padding: 0 3rem;
  background-color: #fff;
}

.iframe {
  width: 100%;
  height: 100%;
}

.drawer_footer {
  display: flex;
  justify-content: flex-end;
  align-content: center;
}

.drawer_footer .footer-btn {
  line-height: 4rem;
  background-color: #f78c51;
  color: #fff;
  margin: 0 1rem;
  padding: 0 3rem;
  border-radius: 0.5rem;
  cursor: pointer;
}

.drawer_footer .reject {
  background-color: #2e3037;
}
</style>
